/**
 * Created by Administrator on 2017/4/6 0006.
 */
var React = require('react');


var Bheader = require('../widget/Bheader');
var Footer = require('../widget/Footer');
var IncreaseId = require('../../web/tools/IncreaseId');
var ajax = require('../tools/ajax');
var postAjax = require('../tools/postAjax');
var ServerIP = require('../tools/ServerIP');
var Icon = require('../components/Icon');
var MsgBox = require('../components/MsgBox');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            theme:"Default", //Default/Blue
            firstFlag:true,
            flag:false,
            clickFlag:false,
            code:60,
            registerMobile:"",
            registerFlag:false,
            mobileFlag:false
        }
    },

    componentDidMount: function () {

    },
    componentWillUnmount:function(){
        if(this.timer){
            clearInterval(this.timer);
            this.timer = null;
        }
    },

    timer:null,

    //信息注册
    insertUserInfo:function () {
        var p =this;
        var registerUid = IncreaseId.increaseId();
        var registerAccount = this.refs.registerAccount.value;
        var registerPassword = this.refs.registerPassword.value;
        var registerMobile = this.refs.registerMobile.value;
        var registerCode = this.refs.registerCode.value;
        var shopId = localStorage.getItem("shopId");
        if(registerUid){
            postAjax("POST",ServerIP.ip+"/kLoginController.do?register",{
                account:registerAccount,
                password:registerPassword,
                phone:registerMobile,
                code:registerCode,
                shopid:shopId,
                photo:"http://115.29.198.39:8080/upload/app/857749830834048835.png"
            },function (dt) {
                if (dt && dt.attributes.result == "true") {
                    location.href = "#login";
                }else{
                    if(dt.msg){
                        p.refs.MsgBox.setState({
                            type: "no",
                            timeout:3000,
                            show:true,
                            word:dt.msg
                        });
                    }
                }
            });
        };
    },
    //获取验证码
    getCodeByPhone(){
        var registerMobile = this.refs.registerMobile.value;
        postAjax("POST",ServerIP.ip+"/kLoginController.do?verificationcode",{
            phone:registerMobile
        },function (dt) {
            console.log(dt);
        });
        this.setState({firstFlag:false});
        this.setState({flag:false});
        this.time();
    },
    //文本框改变事件
    changed(){
        var registerUid = IncreaseId.increaseId();
        var registerAccount = this.refs.registerAccount.value;
        var registerPassword = this.refs.registerPassword.value;
        var registerMobile =this.refs.registerMobile.value;
        var registerCode =this.refs.registerCode.value;
        this.setState({registerMobile:registerMobile});
        if(registerUid&&registerAccount&&registerPassword&&registerMobile&&registerCode){
            this.setState({registerFlag:true})
        }else{
            this.setState({registerFlag:false})
        };
        if(registerMobile) {
            this.setState({mobileFlag:true})
        }else{
            this.setState({mobileFlag:false})
        }
    },
    //倒计时
    time(){
        var p=this;
        var code = this.state.code;
        if(code == 60){
            this.timer = setInterval(function(){
                code -=1;
                p.setState({code:code});
                p.setState({clickFlag:true});
                if(code == 0){
                    p.setState({
                        flag:true,
                        code:60,
                        clickFlag:false,
                    });
                    clearInterval(p.timer);
                }
            },1000)
        }
    },
    clear(){
        this.refs.registerMobile.value = "";
        this.setState({registerFlag:false});
        this.setState({mobileFlag:false});
    },

    render: function () {
        var p = this;
        return (
            <div className="main"  id="main">
                <Bheader theme={this.state.theme} title="注册" headr="flase" hact="#login"></Bheader>
                <div className="container-t">
                    <hr className="orderHr"/>
                    <ul className="register">
                        <li>
                            <Icon className="loginIcon" icon="#icon-wode" />
                            <input ref="registerAccount" type="text" placeholder="请输入您的帐号" onChange={this.changed} onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的帐号'" />
                        </li>
                        <li>
                            <Icon className="loginIcon" icon="#icon-mima" />
                            <input ref="registerPassword" type="password" placeholder="请输入您的密码" onChange={this.changed} onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'" />
                        </li>
                        <li>
                            <Icon className="loginIcon" icon="#icon-mima" />
                            <input type="password" placeholder="请再次输入密码" onChange={this.changed} onfocus="this.placeholder=''" onblur="this.placeholder='请再次输入密码'" />
                        </li>
                        <li>
                            <Icon className="loginIcon" icon="#icon-shouji" />
                            <input ref="registerMobile" type="text" maxLength="11" placeholder="请输入您的手机号" onChange={this.changed} onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的手机号'" />
                            <div className="clear" onClick={p.clear} style={{display:this.state.mobileFlag?"block":"none"}}>
                                <Icon icon="#icon-shanchu" style={{width:".8rem",height:".8rem"}} />
                            </div>
                            <div className="getCode" onClick={this.state.mobileFlag?(this.state.clickFlag?"":this.getCodeByPhone):""} style={{color:this.state.mobileFlag?"#333333":"#999999"}}>
                                {this.state.firstFlag?"获取验证码":""||this.state.flag?"重新获取":"重新获取("+this.state.code+")"}
                            </div>
                        </li>
                        <li>
                            <Icon className="loginIcon" icon="#icon-yanzhengma" />
                            <input ref="registerCode" type="text" placeholder="请输入短信中的验证码" maxLength="6" onChange={this.changed} onfocus="this.placeholder=''" onblur="this.placeholder='请输入短信中的验证码'" />
                        </li>
                    </ul>
                    <div className={this.state.registerFlag?"registerBtn clicked":"registerBtn"} onClick={this.insertUserInfo}>
                        注册
                    </div>
                </div>
                <MsgBox ref="MsgBox"></MsgBox>
            </div>
        )
    }
});

